⚡ 30 秒速记

• 核心判断：响应式系统由依赖收集、变更触发和调度刷新组成，关键不在“监听数据”，而在精确关联状态与副作用
• 原理主线：围绕 「一、Vue.js 运行机制全局概览」、「二、响应式系统的基本原理」、「三、响应式系统的依赖收集追踪原理」 建立输入、状态变化与输出之间的因果关系
• 文章范围：剖析了 Vue.js 的内部运行机制，包括初始化、挂载、模板编译、响应式原理等核心流程，帮助读者全面理解 Vue 的实现原理和工作流程。
• 边界与代价：Vue 2 的 defineProperty 与 Vue 3 的 Proxy 在新增属性、数组和集合类型上边界不同
• 工程落地：排查视图不更新或重复更新时，应沿读取是否被追踪、写入是否触发、任务是否被去重三段定位

Vue 的内部运行可以概括为：初始化响应式数据，编译并执行渲染函数生成 VNode，数据变化后再通过调度和 patch 更新真实 DOM。 在 Vue 2 中，属性读取会借助 Dep 收集当前 Watcher，属性写入则通知相关 Watcher，因此未被视图使用的数据不会触发对应渲染。模板需要先经过 parse、optimize 和 generate，其中静态节点标记能减少后续比较。需要区分版本：这些名称主要对应 Vue 2，Vue 3 改用 Proxy、effect 和新的渲染器路径。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。

一、Vue.js 运行机制全局概览

全局概览

这一节笔者将为大家介绍一下 Vue.js 内部的整个流程，希望能让大家对全局有一个整体的印象，然后我们再来逐个模块进行讲解。从来没有了解过 Vue.js 实现的同学可能会对一些内容感到疑惑，这是很正常的，这一节的目的主要是为了让大家对整个流程有一个大概的认识，算是一个概览预备的过程

首先我们来看一下笔者画的内部流程图。

大家第一次看到这个图一定是一头雾水的，没有关系，我们来逐个讲一下这些模块的作用以及调用关系。相信讲完之后大家对Vue.js内部运行机制会有一个大概的认识。

初始化及挂载

在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化，也就是这里的 init 过程，它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数，用来实现「响应式」以及「依赖收集」，后面会详细讲到，这里只要有一个印象即可。